<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  import { accountApi, numberApi } from '@/api/controller';
  import { ToastSuccess, ToastWarning, Toastloading } from '@/utils/public';
  import { getPlayEndTime, getDateArray } from '@/utils'
  import Pagination from "@/components/Pagination/index.vue";
  import xmDatePicker from '@/components/xmDatePicker/index.vue';
  import { ElMessageBox } from 'element-plus';
  import table2excel from 'js-table2excel';
  const action = reactive({
    total:0,
    list:[] as any[],
    forbid_user:{} as any,
    timeObj:getPlayEndTime(getDateArray('ymd')),
    kk_total:0,
    cash_number:0,
  })
  const orderStatus = [
    { label: "全部", value: -1 },
    { label: "未提现", value: 0 },
    { label: "驳回", value: 2 },
    { label: "已提现", value: 1 },
    { label: "打款中", value: 3 },
    { label: "失败", value: 4 },
    { label: "已撤回", value: 5 },
  ]
  const orderStatusFilter = (status:any)=>{
    return [
      "未提现",
      "已提现",
      "驳回",
      "打款中",
      "失败",
      "撤回提现",
    ][status] || status;
  }
  const pay_typeArr = [
    {type:0,label:'全部'},
    {type:7,label:'贝灵斯'},
    {type:8,label:'支付宝-慧用工'},
    {type:9,label:'支付宝-官方'},
  ]
  const payTypeFilter = (type:any)=>{
    if(!type) return type
    const { label=type } = pay_typeArr.find(res=>res.type == type) || {label:type}
    return label
  }
  const handleReject = (row:any , status:any)=>{
    const { order_id=0, order_sn='', pay_type='', numbers={user_id:''} } = row
    ElMessageBox.confirm(`当前支付方式为${payTypeFilter(pay_type)}，确定执行该操作吗?`, `${status == 2?'驳回':'提现'}`, {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      confirmButtonClass:status == 2?'oe-dialog-btn':''
    }).then(async () => {
      const loading = Toastloading();
      accountApi.setPayStatus(order_id,{
        status,
        order_sn: order_sn,
        pay_type: pay_type,
        user_id: numbers.user_id,
      }).then((res:any)=>{
        const { code=0 } = res
        loading.close();
        getList();
        if (code === 50002) {
          ToastWarning('该账号本月有普通账户提现记录，不可提现打款')
          return
        }
        ToastSuccess("操作成功!");
      }).catch(()=>{
        loading.close();
      })
    }).catch(() => {});
  }
  const initialQuery = {
    page:1,
    limit:20,
    uuid: "",
    nickname: "",
    out_trade_sn:'',
    status: 0,
    sort: "create",
    pay_type: 0,
    union_id:"",
    union_name:""
  }
  const listQuery = reactive({...initialQuery})
  const resetQuery = ()=>{
    Object.assign(listQuery,{...initialQuery})
    action.timeObj = getPlayEndTime(getDateArray('ymdhis'))
    getList()
  }
  const handleSerach = ()=>{
    listQuery.page = 1
    getList()
  }
  const handleSetCashNumber = ()=>{
    ElMessageBox.prompt('', '每日提现次数', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern:/^[0-9]*[1-9][0-9]*$/,
      inputPlaceholder:'请输入正整数每日提现次数',
      inputErrorMessage: '请输入正整数每日提现次数',
    })
    .then(async({ value }) => {
      const loading = Toastloading()
      accountApi.setcash_number({
        number:value,
        operate_type:'write'
      }).then((res)=>{
        const { data=0 } = res
        action.cash_number = data
        loading.close()
        ToastSuccess('设置成功')
      }).catch(()=>{
        loading.close()
      })
    }).catch(() => { })
  }
  const getcash_number = async()=>{
    const res = await accountApi.getcash_number()
    const { data=0 } = res
    action.cash_number = data
  }
  const handleDownload = async()=>{
    if(action.total == 0) return ToastWarning('暂无可导出数据')
    const loading = Toastloading('数据导出中')
    const { playTime:begin_date, endTime:end_date } = action.timeObj
    const res = await accountApi.getAccounts({
      begin_date,
      end_date,
      ...listQuery,
      page:1,
      limit:action.total
    })
    loading.close()
    const { data=[] } = res.data
    const list = data.map((res:any)=>{
      const { numbers={}, pay_type=-1, status=-1 } = res
      const { uuid, nickname } = numbers
      return {
        ...res,
        uuid,
        nickname,
        status_text:orderStatusFilter(status),
        pay_type_text:payTypeFilter(pay_type),
      }
    })
    const tHeader = [
      { title: 'ID', key: "order_id"},
      { title: '交易编号', key: "order_sn"},
      { title: '用户UUID', key: "uuid"},
      { title: '用户昵称', key: "nickname"},
      { title: '公会ID', key: "union_id"},
      { title: '公会名称', key: "union_name"},
      { title: '订单状态', key: "status_text"},
      { title: '金币', key: "kk_amount"},
      { title: '提现金额(单位:元)', key: "price"},
      { title: '支付类型', key: "pay_type_text"},
      { title: '交易订单号', key: "out_trade_sn"},
      { title: '支付宝账号', key: "payment_account"},
      { title: '姓名', key: "payment_name"},
      { title: '银行卡号', key: "payment_rank"},
      { title: '银行开户行', key: "payment_rank_hu"},
      { title: '备注', key: "remark"},
      { title: '操作时间', key: "pay_timestamp"},
      { title: '创建时间', key: "create_timestamp"},
    ]
    table2excel(
      tHeader,
      list,
      `个人提现记录`)
  }
  const getList = async()=> {
    const loading = Toastloading()
    const { playTime:begin_date, endTime:end_date } = action.timeObj
    const res = await accountApi.getAccounts({
      begin_date,
      end_date,
      ...listQuery
    })
    loading.close()
    const { data=[], total=0, kk_total,  } = res.data
    action.total = total
    action.list = data
    action.kk_total = kk_total
  }
  const forbidUser = async()=>{
    const res = await numberApi.getForbidUser()
    const { data=[] } = res || {}
    action.forbid_user = data
  }
  onMounted(async()=>{
    Toastloading()
    await forbidUser()
    getcash_number()
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">用户UUID：</div>
          <el-input v-model="listQuery.uuid" placeholder="请输入用户UUID"/>
        </div>
        <div class="labelItem">
          <div class="label">用户昵称：</div>
          <el-input v-model="listQuery.nickname" placeholder="请输入用户昵称"/>
        </div>
        <div class="labelItem">
          <div class="label">公会ID：</div>
          <el-input v-model="listQuery.union_id" placeholder="请输入公会ID"/>
        </div>
        <div class="labelItem">
          <div class="label">公会名称：</div>
          <el-input v-model="listQuery.union_name" placeholder="请输入公会名称"/>
        </div>
        <div class="labelItem">
          <div class="label">支付类型：</div>
          <el-select v-model="listQuery.pay_type" placeholder="请选择支付类型">
            <el-option v-for="item in pay_typeArr" :label="item.label" :value="item.type" />
          </el-select>
        </div>
        <div class="labelItem">
          <div class="label">订单状态：</div>
          <el-select v-model="listQuery.status" placeholder="请选择订单状态">
            <el-option
              v-for="(item, index) in orderStatus"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <xmDatePicker type="daterange" v-model:timeval="action.timeObj" />
        <div class="labelItem">
          <div class="label">日期类型：</div>
          <el-select v-model="listQuery.sort" placeholder="请选择日期类型">
            <el-option label="创建时间" value="create" />
            <el-option label="操作时间" value="op" />
          </el-select>
        </div>
        <div class="labelItem">
          <div class="label">交易订单号：</div>
          <el-input v-model="listQuery.out_trade_sn" placeholder="请输入交易订单号" style="width: 300px;"/>
        </div>
        <div class="labelItem">
          <el-button type="primary" @click="handleSerach">查询</el-button>
          <el-button type="primary" @click="resetQuery">重置</el-button>
          <el-button type="warning" @click="handleDownload">导出列表</el-button>
          <el-button type="primary" @click="handleSetCashNumber">设置提现次数</el-button>
        </div>
      </div>
    </div>
    <div class="labelBox TablelabelBox">
      <div class="labelItem">
        <div class="label">结算总金额：</div>{{ action.kk_total }}
      </div>
      <div class="labelItem">
        <div class="label">每日提现次数：</div>{{ action.cash_number }}
      </div>
    </div>
    <el-table class="xm-main xm-TableCenter" :data="action.list" border>
      <el-table-column min-width="80" prop="order_id" label="ID" />
      <el-table-column min-width="230" show-overflow-tooltip prop="order_sn" label="交易编号" />
      <el-table-column min-width="120" prop="numbers.uuid" label="UUID" />
      <el-table-column min-width="120" show-overflow-tooltip prop="numbers.nickname" label="用户昵称" />
      <el-table-column min-width="80" prop="union_id" label="公会ID" />
      <el-table-column min-width="120" show-overflow-tooltip prop="union_name" label="公会名称" />
      <el-table-column min-width="120" prop="status" label="订单状态">
        <template #default="scope">
          <el-tag>{{ orderStatusFilter(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column min-width="120" prop="kk_amount" label="金币" />
      <el-table-column min-width="120" prop="price" label="提现金额(单位:元)" />
      <el-table-column min-width="120" prop="pay_type" label="支付类型">
        <template #default="scope">
          <el-tag>{{ payTypeFilter(scope.row.pay_type) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column min-width="210" show-overflow-tooltip prop="out_trade_sn" label="交易订单号" />
      <el-table-column min-width="210" show-overflow-tooltip prop="remark" label="备注" />
      <el-table-column min-width="210" show-overflow-tooltip prop="payment_account" label="支付宝账号" />
      <el-table-column min-width="210" show-overflow-tooltip prop="payment_name" label="姓名" />
      <el-table-column min-width="210" show-overflow-tooltip prop="payment_rank" label="银行卡号" />
      <el-table-column min-width="210" show-overflow-tooltip prop="payment_rank_hu" label="银行开户行" />
      <el-table-column min-width="180" prop="pay_timestamp" label="操作时间" />
      <el-table-column min-width="180" prop="create_timestamp" label="创建时间" />
      <el-table-column fixed="right" min-width="180" label="操作">
        <template #default="scope">
          <el-button
            :disabled="
              [1, 2, 3, 4, 5].indexOf(scope.row.status) >= 0 ||
              action.forbid_user[scope.row.numbers.user_id]
            "
            type="primary"
            @click="handleReject(scope.row,3)"
            >提现</el-button>
          <el-button
            :disabled="
                [1, 2, 3, 5].indexOf(scope.row.status) >= 0 ||
                action.forbid_user[scope.row.numbers.user_id]
            "
            type="danger"
            @click="handleReject(scope.row,2)">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
  </div>
</template>
